<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>终端管理</title>
    <meta name="ctx" th:content="${#httpServletRequest.getContextPath()}"/>
    <link rel="stylesheet" th:href="@{/css/admin/base-v2.css}">
    <link rel="stylesheet" th:href="@{/lib/font-awesome/4.7.0/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/css/admin/app.css}">
    <link rel="stylesheet" th:href="@{/lib/daterangepicker/daterangepicker.css}">
</head>

<body>

<div class="app-page">
    <div class="app-page-content">
        <div class="app-card">
            <div class="app-card-body">
                <div class="app-card-body-con">
                    <div class="z-btn-group">
                        <button class="j-btn-control z-btn z-default" data-popup-open=".popup-add">新增</button>
                        <button data-state="3" class="batch-delete j-btn-control z-btn z-default">批量删除</button>
                    </div>

                    <table class="z-table">
                        <thead>
                        <th>
                            <input type="checkbox" class="input j-checkbox-all">
                        </th>
                        <th>终端型号</th>
                        <th>品牌</th>
                        <th>录入时间</th>
                        <th>主板</th>
                        <th>屏幕类型</th>
                        <th>屏幕尺寸</th>
                        <th>分辨率</th>
                        <th>屏接口</th>
                        <th>蓝牙</th>
                        <th>4G接口数</th>
                        <th>USB接口数</th>
                        <th>串口数</th>
                        <th>备注</th>
                        <th>操作</th>
                        </thead>
                        <tbody>
                        <tr th:each="deviceModel : ${deviceModelList}"
                            th:attr="data-id=${deviceModel.deviceModelId},
                            data-model-name=${deviceModel.modelName},
                            data-brand=${deviceModel.brand},
                            data-mainboard=${deviceModel.mainboard},
                            data-screen-type=${deviceModel.screenType},
                            data-screen-size=${deviceModel.screenSize},
                            data-screen-resolution=${deviceModel.screenResolution},
                            data-screen-interface=${deviceModel.screenInterface},
                            data-blue-tooth=${deviceModel.bluetooth},
                            data-four-g-interface-number=${deviceModel.fourGInterfaceNumber},
                            data-usb-interface-number=${deviceModel.usbInterfaceNumber},
                            data-serial-port-number=${deviceModel.serialPortNumber},
                            data-remark=${deviceModel.remark}">
                            <td>
                                <input type="checkbox" class="input j-checkbox">
                            </td>
                            <td>
                                <span th:text="${deviceModel.modelName}"></span>
                            </td>
                            <td>
                                <span th:text="${deviceModel.brand}"></span>
                            </td>
                            <td>
                                <span th:text="${deviceModel.addTime}"></span>
                            </td>
                            <td>
                                <span th:text="${deviceModel.mainboard}"></span>
                            </td>
                            <td>
                                <span th:text="${deviceModel.screenType}"></span>
                            </td>
                            <td>
                                <span th:text="${deviceModel.screenSize}"></span>
                            </td>
                            <td>
                                <span th:text="${deviceModel.screenResolution}"></span>
                            </td>
                            <td>
                                <span th:text="${deviceModel.screenInterface}"></span>
                            </td>
                            <td>
                                <span th:text="${deviceModel.bluetooth}"></span>
                            </td>
                            <td>
                                <span th:text="${deviceModel.fourGInterfaceNumber}"></span>
                            </td>
                            <td>
                                <span th:text="${deviceModel.usbInterfaceNumber}"></span>
                            </td>
                            <td>
                                <span th:text="${deviceModel.serialPortNumber}"></span>
                            </td>

                            <td>
                                <span th:text="${deviceModel.remark}"></span>
                            </td>
                            <td class="btn-group">
                                <a class="btn-edit" data-title="编辑">编辑</a>
                                <a class="btn-delete" data-title="删除">删除</a>
                            </td>
                        </tr>
                        </tbody>
                    </table>

                    <!-- 分页 -->
                    <div class="pagination z-pat z-fr">
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- 新增 -->
    <div class="popup-add popup-default z-popup z-fixed z-df z-flex-cc z-hide">
        <div class="bg" data-popup-close></div>
        <div class="body">
            <div class="title">新建机型</div>
            <div class="content">
                <form>
                    <input type="hidden" name="deviceModelId" data-name="终端型号ID">
                    <div class="form-item row">
                        <div class="label">
                            <label>终端型号</label>
                        </div>
                        <div class="body">
                            <input type="text" name="modelName" data-name="终端型号" data-rule="required">
                        </div>
                    </div>
                    <div class="form-item row">
                        <div class="label">
                            <label>品牌</label>
                        </div>
                        <div class="body">
                            <input type="text" name="brand" data-name="品牌" data-rule="required">
                        </div>
                    </div>
                    <div class="form-item row">
                        <div class="label">
                            <label>主板</label>
                        </div>
                        <div class="body">
                            <input type="text" name="mainboard" data-name="主板" data-rule="required">
                        </div>
                    </div>
                    <div class="form-item row">
                        <div class="label">
                            <label>屏幕类型</label>
                        </div>
                        <div class="body">
                            <select name="screenType" data-rule="required">
                                <option value="1">单屏</option>
                                <option value="2">双屏</option>
                                <option value="3">三屏</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-item row">
                        <div class="label">
                            <label>屏幕尺寸</label>
                        </div>
                        <div class="body">
                            <input type="text" name="screenSize" data-name="屏幕尺寸" data-rule="required">
                        </div>
                    </div>
                    <div class="form-item row">
                        <div class="label">
                            <label>屏幕分辨率</label>
                        </div>
                        <div class="body">
                            <input type="text" name="screenResolution" data-name="屏幕分辨率" data-rule="required">
                        </div>
                    </div>
                    <div class="form-item row">
                        <div class="label">
                            <label>屏接口</label>
                        </div>
                        <div class="body">
                            <input type="text" name="screenInterface" data-name="屏接口" data-rule="required">
                        </div>
                    </div>
                    <div class="form-item row">
                        <div class="label">
                            <label>蓝牙</label>
                        </div>
                        <div class="body">
                            <select name="bluetooth" data-rule="required">
                                <option value="0">无</option>
                                <option value="1">有</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-item row">
                        <div class="label">
                            <label>4G接口数</label>
                        </div>
                        <div class="body">
                            <select name="fourGInterfaceNumber" data-rule="required">
                                <option value="0">无</option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                                <option value="6">6</option>
                                <option value="7">7</option>
                                <option value="8">8</option>
                                <option value="9">9</option>
                                <option value="10">10</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-item row">
                        <div class="label">
                            <label>USB接口数</label>
                        </div>
                        <div class="body">
                            <select name="usbInterfaceNumber" data-rule="required">
                                <option value="0">无</option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                                <option value="6">6</option>
                                <option value="7">7</option>
                                <option value="8">8</option>
                                <option value="9">9</option>
                                <option value="10">10</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-item row">
                        <div class="label">
                            <label>串口数</label>
                        </div>
                        <div class="body">
                            <select name="serialPortNumber" data-rule="required">
                                <option value="0">无</option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                                <option value="6">6</option>
                                <option value="7">7</option>
                                <option value="8">8</option>
                                <option value="9">9</option>
                                <option value="10">10</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-item row">
                        <div class="label">
                            <label>备注</label>
                        </div>
                        <div class="body">
                            <input type="text" name="remark" data-name="备注" maxlength="200">
                        </div>
                    </div>
                </form>
                <div class="z-btn-group">
                    <a class="btn-submit z-btn z-primary">确定</a>
                    <a class="z-btn z-default" data-popup-close>取消</a>
                </div>
            </div>
        </div>
    </div>

    <div class="popup-edit popup-default z-popup z-fixed z-df z-flex-cc z-hide">

    </div>

</div>

<script th:src="@{/lib/jquery.min.js}"></script>
<script th:src="@{/lib/layer-v3.1.1/layer/layer.js}"></script>
<script th:src="@{/js/popup.js}"></script>
<script th:src="@{/js/form.js}"></script>
<script th:src="@{/js/admin/app.js}"></script>
<script th:src="@{/js/pagination.js}"></script>
<script th:src="@{/lib/daterangepicker/moment.min.js}"></script>
<script th:src="@{/lib/daterangepicker/daterangepicker.js}"></script>
<script>

    //获取context path
    var context = $("meta[name='ctx']").attr("content");

    //处理分页
    var pageNum = [[${pageNum}]];
    var pageSize = [[${pageSize}]];
    var total = [[${total}]];

    $(function () {

        eventEmit();

    })

    var pagination = new Pagination(".pagination", {
        pageIndex: pageNum, // 当前页数
        pageSize: pageSize, // 每页数量
        count: total, // 总条数
        maxButtonCount: 5, // 分页按钮数量(可选)
        // 分页切换事件
        onPageChanged: function(pageIndex) {
            window.location.href = "/ckips/ckSystem/listByPage?pageNum=" + pageIndex + "&pageSize=" + pageSize;
        }
    })

    // 从URL加载搜索数据
    $(".filter").formLoad(App.query);

    // 后台渲染分页 - 补全url参数(后台传参可以忽略)
    $(".z-page a").each(function () {
        $(this).attr("href", $(this).attr("href") + location.search)
    });

    // 获取表格中选择的ID
    function getSelecteId() {
        let temp = [];
        $('tbody [type="checkbox"]').each(function (index, element) {
            if (element.checked == true) {
                temp.push($(this).parents('tr,.tr').data('id'));
            }
        })

        return temp.join(',');
    }

    function eventEmit() {
        // 新增 - 弹窗打开
        $('.btn-add').click(function () {
            popup.open('.popup-add')
        })

        // 修改 - 弹窗打开
        $('.btn-edit').click(function () {
            var data = $(this).parents('tr')[0].dataset;
            //取值
            var deviceModelId = data["id"];
            $.ajax({
                type: "POST",
                url: context + "/ckSystem/getDeviceModelById",
                data: {
                    deviceModelId: deviceModelId
                },
                async: false,
                success: function (obj) {
                    console.log(obj);
                    var code = obj.code;
                    if (code == 0 && obj.data) {

                        $('.popup-edit').html($('.popup-add').html()).find('.title').text('编辑');
                        $('.popup-edit').formLoad({
                            deviceModelId: obj.data.deviceModelId,
                            modelName: obj.data.modelName,
                            brand: obj.data.brand,
                            mainboard: obj.data.mainboard,
                            screenType: obj.data.screenType,
                            screenSize: obj.data.screenSize,
                            screenResolution: obj.data.screenResolution,
                            screenInterface: obj.data.screenInterface,
                            fourGInterfaceNumber: obj.data.fourGInterfaceNumber,
                            usbInterfaceNumber: obj.data.usbInterfaceNumber,
                            serialPortNumber: obj.data.serialPortNumber,
                            bluetooth: obj.data.bluetooth,
                            remark: obj.data.remark
                        })
                        //获取上级部门选择列表
                        popup.open('.popup-edit');
                    } else {
                        popup.tipsTop('机型不存在或已被删除', 'warning');
                    }
                }
            })
        })
    }

    // 新增机型保存
    var form = $(".popup-add form").form({
        submitSelector: ".popup-add .btn-submit",
        msg: function(msg) {
            popup.tipsTop(msg, 'warning');
        },
        submit: function() {
            var data = {};
            $.each($(".popup-add form").serializeArray(), function(index, field) {
                if (data[field.name]) {
                    data[field.name] += "," + field.value;
                } else {
                    data[field.name] = field.value;
                }
            })
            $.ajax({
                type:"POST",
                url :context + "/ckSystem/addDeviceModel",
                data:data,
                success: function(obj) {
                    console.log(obj);
                    var code = obj.code;
                    if (code == 0) {
                        popup.tipsTop(obj.msg, 'success');
                        setTimeout(function () {
                            window.location.href = context + "/ckSystem/listByPage";
                        }, 1000);
                    } else {
                        popup.tipsTop(obj.msg, 'warning');
                    }
                }
            })
        }
    })


    // 修改 - 弹窗确定
    var form = $(".popup-edit form").form({
        submitSelector: ".popup-edit .btn-submit",
        msg: function (msg) {
            popup.tipsTop(msg, 'warning');
        },
        submit: function () {
            var data = {};
            $.each($(".popup-edit form").serializeArray(), function (index, field) {
                if (data[field.name]) {
                    data[field.name] += "," + field.value;
                } else {
                    data[field.name] = field.value;
                }
            })

            //修改
            $.ajax({
                type: "POST",
                url: context + "/ckSystem/updateDeviceModel",
                data: data,
                success: function (obj) {
                    var code = obj.code;
                    if (code == 0) {
                        popup.tipsTop(obj.msg, 'success');
                        setTimeout(function () {
                            window.location.href = context + "/ckSystem/listByPage";
                        }, 1000);
                    } else {
                        popup.tipsTop(obj.msg, 'warning');
                    }
                }
            })
        }
    })

    // 批量删除
    $('.batch-delete').click(function(params) {
        var id = getSelecteId();
        if (id != '') {
            if (confirm('确认是否删除')) {
                console.log(id);
                $.ajax({
                    type:"POST",
                    url :context + "/ckSystem/delete",
                    data:{
                        deviceModelIds : id
                    },
                    success: function(obj) {
                        var code = obj.code;
                        if (code == 0) {
                            popup.tipsTop(obj.msg, 'success');
                            setTimeout(function () {
                                window.location.href = context + "/ckSystem/listByPage";
                            }, 1000);
                        } else {
                            popup.tipsTop(obj.msg, 'warning');
                        }
                    }
                })
            }
        } else {
            popup.tipsTop("请选择需要删除的数据", 'warning');
        }
    })

    // 删除
    $('.btn-delete').click(function(params) {
        var data = $(this).parents('tr')[0].dataset;
        console.log(data["id"]);
        if (confirm('确认是否删除')) {
            $.ajax({
                type:"POST",
                url :context + "/ckSystem/delete",
                data:{
                    deviceModelIds : data["id"]
                },
                success: function(obj) {
                    var code = obj.code;
                    if (code == 0) {
                        popup.tipsTop(obj.msg, 'success');
                        setTimeout(function () {
                            window.location.href = context + "/ckSystem/listByPage";
                        }, 1000);
                    } else {
                        popup.tipsTop(obj.msg, 'warning');
                    }
                }
            })
        }
    })
</script>
</body>

</html>